<template>
  <div id="newUserLayout">
    <a-layout>
      <a-layout-header class="header">
        <NewUserHeader />
      </a-layout-header>
      <a-layout>
        <!--        <a-layout-content class="content">-->
        <a-row style="margin-top: 30px">
          <a-col :span="6" class="mySider">
            <div class="leftModel">
              <GlobalSider />
            </div>
          </a-col>
          <a-col :span="18" class="mycontent">
            <div class="rightModel">
              <router-view />
            </div>
          </a-col>
        </a-row>
        <!--        </a-layout-content>-->
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import NewUserHeader from "@/components/NewUserHeader.vue";
import GlobalSider from "@/components/NewGlobalSider.vue";

export default {
  name: "userLayout",
  components: { GlobalSider, NewUserHeader },
};
</script>

<style scoped>
#newUserLayout {
}

#newUserLayout .header {
  /*margin-bottom: 12px;*/
  /*box-shadow: #382f2f 1px 1px 5px;*/
  height: 500px;
  /*background-color: #be5555;*/
}

#newUserLayout .content {
  /*background: #fca7a7;*/
  /*margin-bottom: 16px;*/
  width: 100%;
  /*height: 100%;*/
  /*min-height: 100vh;*/
  margin: auto;
  /*padding: 20px;*/
}

.mySider {
  /*background-color: #c9a4a4;*/
}

.mycontent {
  /*background-color: skyblue;*/
  /*height: 100%;*/
}

.leftModel {
  margin-top: 10px;
  margin-left: 30%;
}

.rightModel {
  margin-top: 50px;
  width: 80%;
  min-height: 600px;
  /*margin-right: 20%;*/
}
</style>
